<template>
	<view class="content">
		<view class="top_card">
			<img class="top_bg" src="/static/images/bg.png" alt="" />
			<view class="jh_card">
				<view>
					<view>
						<view v-if="!avatar" class="cu-avatar xl round bg-white">
							<view class="iconfont icon-people text-gray icon"></view>
						</view>
						<image v-if="avatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
						</image>
					</view>
					<view>
						<view v-if="!name && !phone" @click="handleToLogin" class="login-tip">
							点击登录
						</view>
						<view v-if="name||phone" class="margin-left-sm">
							<view class="">
								{{name||phone}}
							</view>
							<view class="margin-tb-sm">
								ID:{{userId}}
							</view>
						</view>
					</view>
				</view>
				<view>
					<view class="flex align-center">
						<image src="@/static/images/star.png" class="cu-avatar xl round" style="background-color: #fff;"
							mode="widthFix">
						</image>
						<view class="margin-left-sm">
							<view class="flex align-center margin-tb-sm">
								<view>晶核</view>
								<view class="margin-left-sm">{{ number || 0}}</view>
							</view>
							
						</view>
					</view>
					<view class="flex justify-end">
						<view class="zhuanzeng_btn" @click="zhuanzengPop()">
							转赠
						</view>
						<view class="zhuanzeng_btn margin-left-sm" @click="chushouPop()">
							出售
						</view>
					</view>
				</view>
				
				

			</view>
		</view>
		<view class="grid-container">
			<view class="grid-item" v-for="(item,i) in list" :key="i">
				<view class="" @click="toDetails(item.cardId)">
					<image src="/static/images/card_img.png" alt="" class="grid_img" mode="aspectFill" />
					<view class="grid-tit">趣能卡</view>
				</view>

				<view class="btn_box">
					<view class="btn1" @click="handedZhuanZeng(item)">
						转赠
					</view>
					<view class="btn2" @click="handedShengJi(item)">
						升级
					</view>
				</view>
			</view>
		</view>
		<view class="list_status">
			{{status=='noData'?'暂无数据':status=='loadding'?'加载中...':status=='hasMore'?'下拉加载更多':status=='noMore'?'没有更多了':status=='error'?'加载出错,请稍后重试...':''}}
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="zhuanzeng_pop">
				<view class="pop_top">
					<view class="pop_title">
						转赠
					</view>
					<img src="/static/images/close.png" class="pop_close" @click="popClose">
					</img>
				</view>
				<view class="pop_card_info flex">
					<img src="/static/images/card_img.png" alt="" class="pop_card_img" />
					<view>
						<view class="pop_card_title">
							趣能卡
						</view>
						<view class="pop_card_props">
							<view class="pop_props_item">
								活跃力:{{card.gradesOne}}级
							</view>
							<view class="pop_props_item">
								传播力:{{card.gradesTwo}}级
							</view>
							<view class="pop_props_item">
								创作力:{{card.gradesThree}}级
							</view>
							<view class="pop_props_item">
								影响力:{{card.gradesFour}}级
							</view>
							<view class="pop_props_item">
								成长力:{{card.gradesFive}}级
							</view>
						</view>
					</view>
				</view>
				<view class="pop_input_title">
					转赠给
				</view>
				<view class="pop_input">
					<input class="uni-input" v-model="phoneNo" placeholder="请输入对方手机号" />
				</view>
				<view class="pop_tips">
					注意：一旦转赠，无法进行撤回操作，转赠后不在享受该卡所有权益
				</view>
				<view class="pop_bottom_btn" @click="ZhuanZengConfirm">
					确认转赠
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup1" type="bottom" border-radius="10px 10px 0 0">
			<view class="zhuanzeng_pop">
				<view class="pop_top">
					<view class="pop_title">
						升级类型
					</view>
					<img src="/static/images/close.png" class="pop_close" @click="popClose1">
					</img>
				</view>
				<view class="pop_card_info flex">
					<view>
						<view class="pop_card_title">
							属性升级
						</view>
						<view class="pop2_card_props">
							<view class="pop2_props_item" :class="propChooseI == 0?'pop2_props_item_a':''"
								@click="propsChoose(0)">
								活跃力:{{card.gradesOne}}级
							</view>
							<view class="pop2_props_item" :class="propChooseI == 1?'pop2_props_item_a':''"
								@click="propsChoose(1)">
								传播力:{{card.gradesTwo}}级
							</view>
							<view class="pop2_props_item" :class="propChooseI == 2?'pop2_props_item_a':''"
								@click="propsChoose(2)">
								创作力:{{card.gradesThree}}级
							</view>
							<view class="pop2_props_item" :class="propChooseI == 3?'pop2_props_item_a':''"
								@click="propsChoose(3)">
								影响力:{{card.gradesFour}}级
							</view>
							<view class="pop2_props_item" :class="propChooseI == 4?'pop2_props_item_a':''"
								@click="propsChoose(4)">
								成长力:{{card.gradesFive}}级
							</view>
						</view>
					</view>
				</view>
				<view class="pop_bottom_btn" @click="ShengJiConfirm">
					确认升级
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" type="center" border-radius="10px 10px 0 0">
			<view class="zhuanzeng_pop2">
				<view class="pop_top">
					<view class="pop_title">
						属性升级
					</view>
				</view>
				<view class="pop_card_info flex justify-center">
					<view class="pop2_card_title text-center">
						{{propChooseName}}属性提升{{propUpgradeUse}}
					</view>
				</view>
				<view class="flex justify-center">
					<view class="pop2_bottom_btn1" @click="popCancel">
						取消
					</view>
					<view class="pop2_bottom_btn2" @click="popConfirm">
						确认
					</view>
				</view>

			</view>
		</uni-popup>
		<uni-popup ref="popup3" type="bottom" border-radius="10px 10px 0 0">
			<view class="zhuanzeng_pop">
				<view class="pop_top">
					<view class="pop_title">
						转赠
					</view>
					<img src="/static/images/close.png" class="pop_close" @click="popClose2">
					</img>
				</view>
				<view class="pop_input_title">
					转赠给
				</view>
				<view class="pop_input">
					<input class="uni-input" v-model="zzphoneNo" placeholder="请输入对方手机号" />
				</view>
				<view class="pop_input_title">
					转赠晶核数量
				</view>
				<view class="pop_input">
					<input class="uni-input" v-model="JhCount" placeholder="请输入转赠晶核数量" />
				</view>
				<view class="pop_tips">
					每次转赠收取5%晶核，每次转赠最少收取1个晶核，每次最少转赠10个晶核
				</view>
				<view class="pop_bottom_btn" @click="ZhuanZengJhConfirm">
					确认转赠
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup4" type="bottom" border-radius="10px 10px 0 0">
			<view class="zhuanzeng_pop">
				<view class="pop_top">
					<view class="pop_title">
						出售
					</view>
					<img src="/static/images/close.png" class="pop_close" @click="popClose3">
					</img>
				</view>
				<view class="pop_input_title">
					当前回收单价:1元/个
				</view>
				<view class="pop_input_title">
					出售晶核数量
				</view>
				<view class="pop_input">
					<input class="uni-input" v-model="csCount" placeholder="请输入出售晶核数量" />
				</view>
				<view class="pop_input_title">
					收款方式
				</view>
				<view class="pop_select margin-tb-sm">
					<uni-data-select v-model="payment" :localdata="paymentList"
						@change="payMentchange"></uni-data-select>
				</view>
				<view class="pop_tips">
					向平台出售额外收取5%晶核，最少收取1个，每次出售最少10个晶核，每人每天可出售一次（需要认证）
				</view>
				<view class="pop_bottom_btn" @click="ChuShouJhConfirm">
					确认出售
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		getQuFunCardList,
		cardpresent,
		cardUpgrade,
		getUpgradeJh,
		presentJh
	} from "@/api/system/user";

	export default {
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
			number() {
				return this.$store.state.user.number
			}
		},
		data() {
			return {
				card: {},
				list: [],
				name: this.$store.state.user.name,
				userId: this.$store.state.user.id,
				propChooseI: null,
				phone: this.$store.state.user.phone,
				propChooseName: '',
				propUpgradeUse: '',
				phoneNo: '',
				zzphoneNo: '',
				JhCount: '',
				csCount: '',
				payment: '',
				pageNum: 1,
				status: 'noMore',
				paymentList: [{
						value: 0,
						text: "微信"
					},
					{
						value: 1,
						text: "支付宝"
					},
					{
						value: 2,
						text: "银行卡"
					},
				]

			}
		},
		onLoad() {
			this.$store.dispatch('GetInfo')
			this.getQuFunCardList()
		},
		onReachBottom() {
			if (this.status == 'loadding' || this.status == 'noMore' || this.status == 'noData') return
			this.pageNum++
			this.getQuFunCardList()
		},
		methods: {
			payMentchange(e) {

			},
			zhuanzengPop() {
				this.$refs.popup3.open()
			},
			chushouPop() {
				this.$refs.popup4.open()
			},
			getQuFunCardList() {
				this.status = 'loadding'
				getQuFunCardList(this.userId, this.pageNum).then(res => {
					this.list = this.list.concat(res.rows)
					this.status = res.total == 0 ? 'noData' : this.list.length == res.total ? 'noMore' : 'hasMore'
				}).catch((e) => {
					this.status = 'error'
				})
			},
			toDetails(id) {
				uni.navigateTo({
					url: '/pages/cardDetails?cardId=' + id
				})
			},
			handedZhuanZeng(card) {
				this.card = card
				this.$refs.popup.open()
			},
			handedShengJi(card) {
				this.card = card

				this.$refs.popup1.open()
			},
			ZhuanZengConfirm() {
				if (this.phoneNo == '') {
					uni.showToast({
						title: "请先输入手机号",
						icon: 'none'
					})
					return
				}
				let params = {
					cardId: this.card.cardId,
					phone: this.phoneNo
				}
				cardpresent(params).then(res => {
					uni.showToast({
						title: "转赠成功",
						icon: 'none'
					})
					this.$refs.popup.close()
					this.refreshData()
				})
			},
			ZhuanZengJhConfirm() {
				if (this.zzphoneNo == '') {
					uni.showToast({
						title: "请先输入手机号",
						icon: 'none'
					})
					return
				}
				if (this.JhCount == '') {
					uni.showToast({
						title: "请先输入转赠晶核数量",
						icon: 'none'
					})
					return
				}
				let params = {
					userId: this.userId,
					phone: this.zzphoneNo,
					number: this.JhCount
				}
				presentJh(params).then(res => {
					uni.showToast({
						title: "转赠成功",
						icon: 'none'
					})
					this.$refs.popup3.close()
					this.refreshData()
				})
			},
			ChuShouJhConfirm() {
				if (this.csCount == '') {
					uni.showToast({
						title: "请先输入出售晶核数量",
						icon: 'none'
					})
					return
				}
				if (this.payment == '') {
					uni.showToast({
						title: "请先选择收款方式",
						icon: 'none'
					})
					return
				}
			},
			popClose() {
				this.$refs.popup.close()
			},
			popClose1() {
				this.$refs.popup1.close()
			},
			popClose2() {
				this.$refs.popup3.close()
			},
			popClose3() {
				this.$refs.popup4.close()
			},
			propsChoose(i) {
				this.propChooseI = i
			},
			ShengJiConfirm() {
				if (this.propChooseI == null) {
					uni.showToast({
						title: "请先选择升级属性",
						icon: 'none'
					})
					retrun
				}
				switch (this.propChooseI) {
					case 0:
						this.propChooseName = '活跃力'
						this.getUpgradeUse(this.card.gradesOne)
						break;
					case 1:
						this.propChooseName = '传播力'
						this.getUpgradeUse(this.card.gradesTwo)
						break;
					case 2:
						this.propChooseName = '创作力'
						this.getUpgradeUse(this.card.gradesThree)
						break;
					case 3:
						this.propChooseName = '影响力'
						this.getUpgradeUse(this.card.gradesFour)
						break;
					case 4:
						this.propChooseName = '成长力'
						this.getUpgradeUse(this.card.gradesFive)
						break;
					default:
						break;
				}

			},
			popCancel() {
				this.$refs.popup2.close()
			},
			popConfirm() {
				let params = {
					cardId: this.card.cardId,
					type: this.propChooseI + 1
				}
				cardUpgrade(params).then(res => {
					uni.showToast({
						title: "升级成功",
						icon: 'none'
					})
					this.$refs.popup2.close()
					this.refreshData()
				})
			},
			getUpgradeUse(level) {
				let params = {
					level: level
				}
				getUpgradeJh(params).then(res => {
					this.propUpgradeUse = res.data.configName + res.data.configValue
					this.$refs.popup1.close()
					this.$refs.popup2.open()
				})

			},
			refreshData() {
				this.$store.dispatch('GetInfo')
				this.pageNum = 1
				this.list = []
				this.propChooseI = null
				this.getQuFunCardList()
			}
		}
	}
</script>

<style scoped>
	.content {
		margin: 0 auto;

		@media screen and (max-width: 1920px) {
			max-width: 500px;
		}

		@media screen and (max-width: 1280px) {
			max-width: 100%;
		}
	}

	.top_card {
		position: relative;
		display: flex;
		justify-content: center;

	}

	.top_bg {
		margin-top: -300rpx;
		width: 100%;

	}

	.jh_card {
		width: 650rpx;
		height: 256rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 22rpx 28rpx -6rpx #E9F3FF;
		border-radius: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		bottom: -50rpx;
		padding: 40rpx;
	}

	.jh_img {
		width: 90rpx;
		height: 86rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.t1 {
		font-size: 28rpx;
		color: #1C2D57;
	}

	.t2 {
		font-size: 48rpx;
		font-weight: bold;
		color: #000;
		margin-top: 20rpx;
	}

	.grid-container {
		display: grid;
		justify-content: center;
		grid-template-columns: repeat(2, 325rpx);
		gap: 20rpx;
		margin-top: 120rpx;
		margin-bottom: 50rpx;
	}

	.grid-item {
		background-color: rgba(255, 255, 255, 0.8);
		font-size: 40rpx;
		text-align: center;
		border-radius: 5%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		box-shadow: 0rpx 22rpx 28rpx -6rpx #E9F3FF;
	}

	.grid_img {
		width: 100%;
		height: 320rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.grid-tit {
		font-weight: 500;
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.btn_box {
		display: flex;
		justify-content: center;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}

	.btn1 {
		border: 1rpx solid #000;
		padding: 10rpx 40rpx;
		border-radius: 10rpx;
	}

	.btn2 {
		border: 1rpx solid #000;
		padding: 10rpx 40rpx;
		border-radius: 10rpx;
		background-color: #000;
		color: #fff;
		margin-left: 10rpx;
	}

	.btn2:active {
		opacity: 0.8;
	}

	.zhuanzeng_pop {
		background-color: #fff;
		padding: 40rpx;
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
		padding-bottom: 120rpx;
	}

	.zhuanzeng_pop2 {
		background-color: #fff;
		padding: 40rpx;
		border-radius: 40rpx;
		width: 650rpx;
		padding-bottom: 120rpx;
		position: relative;
	}

	.zhuanzeng_pop,
	.zhuanzeng_pop2 {
		background-color: #fff;
		border-radius: 40rpx;
		box-shadow: 0 10rpx 50rpx rgba(0, 0, 0, 0.1);
	}

	.pop_top {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.pop_close {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 40rpx;
		top: 40rpx;
	}

	.pop_title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.pop_card_img {
		width: 20%;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}

	.pop_card_title {
		font-size: 28rpx;
		font-weight: 600;
	}

	.pop_card_props {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.pop_props_item {
		width: 160rpx;
		margin-bottom: 10rpx;
	}

	.pop_input_title {
		font-size: 28rpx;
		font-weight: 600;
		margin-top: 20rpx;
	}

	.pop_input {
		background-color: #f8f8f8;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		border: 1rpx solid #eee;
	}

	.pop_tips {
		font-size: 28rpx;
		font-weight: 500;
		color: #ffa940;
		margin-top: 20rpx;
	}

	.pop_bottom_btn {
		width: 100%;
		height: 80rpx;
		background-color: #000;
		color: #fff;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 600;
		margin-top: 40rpx;
	}

	.pop2_card_props {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.pop2_props_item {
		width: 295rpx;
		margin-bottom: 10rpx;
		background-color: #f1f1f1;
		padding: 20rpx;
		text-align: center;
		margin: 20rpx;
		cursor: pointer;
		border-radius: 40rpx;
	}

	.pop2_props_item_a {
		color: #1677ff;
	}

	.pop2_bottom_btn1 {
		height: 80rpx;
		border: 1rpx solid #000;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 600;
		margin-top: 40rpx;
		padding: 0 80rpx;
	}

	.pop2_bottom_btn2 {
		height: 80rpx;
		background-color: #000;
		color: #fff;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 600;
		margin-top: 40rpx;
		margin-left: 20rpx;
		padding: 0 80rpx;
	}

	.zhuanzeng_btn {
		border: 1rpx solid #000;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		background-color: #000;
		color: #fff;
		width: 100rpx;
	}

	.list_status {
		width: 100%;
		margin: 20rpx 0;
		font-size: 28rpx;
		text-align: center;
		color: #a2a6b1;
	}
</style>